<template>
  <div class="app-container">
    <el-row :gutter="10">
      <!-- 年级 -->
      <el-col :span="5">
        <el-table
          class="el_select_table"
          v-loading="loading"
          :data="gradeList"
          @row-click="gradeRowClick"
          :row-class-name="gradeRowClass"
          style="border: 1px solid #dfe6ec; border-bottom: none;"
        >
          <el-table-column label="年级ID" align="center" prop="gradeId" width="100" />
          <el-table-column label="年级" align="center" prop="gradeName" />
          <el-table-column label="操作" width="100" align="center" class-name="small-padding fixed-width">
            <template slot-scope="scope">
              <el-button
                size="small"
                type="text"
                @click.stop="handleUpdateGrade(scope.row)"
                v-hasPermi="['recitation:grade:edit']"
              >编辑</el-button>
              <el-button
                size="small"
                type="text"
                @click.stop="handleDeleteGrade(scope.row)"
                v-hasPermi="['recitation:grade:remove']"
              >删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-button type="primary" plain style="width: 100%;border-radius: 0px;" @click="handleAddGrade">添加</el-button>
      </el-col>

      <!-- 学期 -->
      <el-col :span="5">
        <el-table
          class="el_select_table"
          v-loading="loading"
          :data="semesterList"
          @row-click="semesterRowClick"
          :row-class-name="semesterRowClass"
          style="border: 1px solid #dfe6ec; border-bottom: none;"
        >
          <el-table-column label="学期ID" align="center" prop="semesterId" width="100" />
          <el-table-column label="学期" align="center" prop="semesterName" />
          <el-table-column label="操作" width="100" align="center" class-name="small-padding fixed-width">
            <template slot-scope="scope">
              <el-button
                size="small"
                type="text"
                @click.stop="handleUpdateSemester(scope.row)"
                v-hasPermi="['recitation:grade:edit']"
              >编辑</el-button>
              <el-button
                size="small"
                type="text"
                @click.stop="handleDeleteSemester(scope.row)"
                v-hasPermi="['recitation:grade:remove']"
              >删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-button type="primary" plain style="width: 100%;border-radius: 0px;" @click="handleAddSemester">添加</el-button>
      </el-col>

      <!-- 单元 -->
      <el-col :span="5">
        <el-table
          class="el_select_table"
          v-loading="loading"
          :data="unitList"
          style="border: 1px solid #dfe6ec;  border-bottom: none;"
        >
          <el-table-column label="单元ID" align="center" prop="unitId" width="100" />
          <el-table-column label="单元" align="center" prop="unitName" />
          <el-table-column label="操作" width="100" align="center" class-name="small-padding fixed-width">
            <template slot-scope="scope">
              <el-button
                size="small"
                type="text"
                @click.stop="handleUpdateUnit(scope.row)"
                v-hasPermi="['recitation:grade:edit']"
              >编辑</el-button>
              <el-button
                size="small"
                type="text"
                @click.stop="handleDeleteUnit(scope.row)"
                v-hasPermi="['recitation:grade:remove']"
              >删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-button type="primary" plain style="width: 100%;border-radius: 0px;" @click="handleAddUnit">添加</el-button>
      </el-col>

      <!-- 题材 -->
      <el-col :span="7" :offset="2">
        <el-table v-loading="loading" style="border: 1px solid #dfe6ec; border-bottom: none;">
          <el-table-column label="题材ID" align="center" prop="prop" width="100" />
          <el-table-column label="题材" align="center" prop="prop" />
          <el-table-column label="操作" width="100" align="center" class-name="small-padding fixed-width">
            <template slot-scope="scope">
              <el-button
                size="small"
                type="text"
                @click="handleUpdateType(scope.row)"
                v-hasPermi="['recitation:grade:edit']"
              >编辑</el-button>
              <el-button
                size="small"
                type="text"
                @click="handleDeleteType(scope.row)"
                v-hasPermi="['recitation:grade:remove']"
              >删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-button type="primary" plain style="width: 100%;border-radius: 0px;" @click="handleAddType">添加</el-button>
      </el-col>
    </el-row>

    <popoform ref="popoform"></popoform>
    <!-- <el-form
      :model="queryParams"
      ref="queryForm"
      :inline="true"
    >
      <el-form-item>


      </el-form-item>
      <el-form-item>

      </el-form-item>
      <el-form-item>

      </el-form-item>
      <el-form-item style="width: 180px"></el-form-item>
      <el-form-item>

      </el-form-item>
      <el-form-item>
        <el-button class="btnSave" type="primary" @click="save"
          >保 存</el-button
        >
        <el-button @click="cancel">返 回</el-button>
      </el-form-item>
    </el-form>-->
  </div>
</template>

<script>
  import { listGrade, getGrade, delGrade, addGrade, updateGrade } from "@/api/ywjy/grade";
  import PopoForm from "@/components/PopoForm/PopoForm";
  import { delSemester, listSemester } from "@/api/ywjy/semester";
  import { listUnit, delUnit } from "@/api/ywjy/unit";

  export default {
    name: "Grade",
    data() {
      return {
        gradeList: [], // 年级表格数据
        semesterList: [],
        ids: [], // 选中数组
        loading: true, // 遮罩层
        gradeId: "",
        unitList: [],
        //////////////////////////////以上是我定义的

        gradeSelectedId: null,

        // 查询参数
        queryParams: {
          pageNum: 1,
          pageSize: 10,
          gradeId: "",
          gradeName: "",
          unitId: "",
          semesterId: "",

          deleteFlag: null,
          createdTime: null,
          updatedBy: null,
          updatedTime: null,
        },
        // 点击保存时需要携带的参数
        form: {
          gradeId: "",
          gradeName: "",
          semesterId: "",
          semesterName: "",
          unitId: "",
          unitName: "",
        },
      };
    },
    components: {
      popoform: PopoForm,
    },
    created() {
      this.getGradeList();
    },
    methods: {
      //查询年级列表
      getGradeList() {
        this.loading = true;
        listGrade(this.queryParams).then((response) => {
          this.gradeList = response.rows;
          console.log("88888888888", this.gradeList);
          this.loading = false;
        });
      },
      //根据grade的id获取学期信息
      getSemester() {
        this.loading = true;
        listSemester(this.queryParams).then((res) => {
          this.semesterList = res.rows;
          console.log("this.semesterList", this.semesterList);
          this.loading = false;
          // this.getGradeList()
        });
      },
      //根据年级的id和学期id获取单元信息
      getUnit() {
        this.loading = true;
        listUnit(this.queryParams).then((res) => {
          this.unitList = res.rows;
          console.log(" this.unitList", this.unitList);
          this.loading = false;
        });
        // this.getGradeList()
      },
      //年级表格中 点击添加按钮
      handleAddGrade() {
        this.gradeEdit({});
        //需要添加一个el-form-item 包含表格的一项 年级ID 年级 操作
        // this.gradeList.push({
        //   gradeId,,
        //   gradeName:"",
        // //  isEdit:true//由于是新添加的属性值 isEdit是true表示编辑模式
        // })
        //自动获取焦点
        // this.$nextTick(() => {
        //   this.$refs[this.gradeList.length - 1].focus()
        // })
      },
      gradeToButton(row) {},
      gradeToInput(row) {},
      gradeEdit(row) {
        let data = Object.assign({}, row);
        data.id = data.gradeId || data.id;
        let id = !!data && !!data.id ? data.id : null;
        let BASE_URL = process.env.VUE_APP_BASE_API;

        this.$refs.popoform
          .open({
            title: (!!id ? "编辑" : "新增") + "年级",
            formData: data,
            addUrl: "/recitation_admin/grade/add",
            updateUrl: "/recitation_admin/grade/update",
            component_list: [{ name: "gradeName|年级名称|text" }],
            requireFields: "gradeName",
          })
          .success((data) => {
            this.getGradeList();
            // console.log( "年级保存成功", data);
          });
      },
      //年级表格中 点击编辑按钮
      handleUpdateGrade(row) {
        const gradeIds = row.gradeId || this.ids;
        this.gradeEdit(row);
      },
      //年级表格中 点击删除按钮
      handleDeleteGrade(row) {
        console.log("年级表格中 点击删除按钮", row);
        const gradeIds = row.gradeId || this.ids;
        this.delConfirm()
          .then(function () {
            return delGrade(gradeIds);
          })
          .then(() => {
            this.getGradeList();
            this.msgSuccess("删除成功");
          });
      },
      gradeRowClass({ row, rowIndex }) {
        if (row.gradeId == this.gradeSelectedId) {
          return "selected-row";
        }
        return "";
      },
      //  点击年级的表格行
      gradeRowClick(row, column, event) {
        this.gradeSelectedId = row.gradeId;
        this.semesterList = [];
        this.unitList = [];
        console.log("grade row click", row, column, event);
        this.selectedSemesterList();
      },
      selectedSemesterList(){
        this.queryParams = { gradeId: this.gradeSelectedId };
        this.getSemester();
      },

      semesterRowClass({ row, rowIndex }) {
        if (row.semesterId == this.semesterSelectedId) {
          return "selected-row";
        }
        return "";
      },
      //  点击年级的表格行
      semesterRowClick(row, column, event) {
        this.semesterSelectedId = row.semesterId;
        console.log("semester row click", row, column, event);
        this.selectedUnitList();
      },
      selectedUnitList(){
        this.queryParams = { semesterId: this.semesterSelectedId, gradeId: this.gradeSelectedId };
        this.getUnit();
      },

      delConfirm() {
        return this.$confirm("确认删除？", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        });
      },

      //学期表格中 点击编辑按钮
      handleUpdateSemester(row) {
        let data = Object.assign({}, row);
        data.id = data.semesterId || data.id;
        let id = !!data && !!data.id ? data.id : null;
        let BASE_URL = process.env.VUE_APP_BASE_API;

        if( !data.gradeId){
          this.msgError( "请先选择年级");
          return;
        }

        this.$refs.popoform
          .open({
            title: (!!id ? "编辑" : "新增") + "学期",
            formData: data,
            addUrl: "/recitation_admin/semester/add",
            updateUrl: "/recitation_admin/semester/update",
            component_list: [{ name: "semesterName|学期名称|text" }],
            requireFields: "semesterName",
          })
          .success((data) => {
            this.selectedSemesterList();
          });
      },
      //学期表格中 点击删除按钮
      handleDeleteSemester(row) {
        console.log("学期表格中 点击删除按钮", row);
        if( !row){
          this.msgError( "未找到要删除的学期");
          return;
        }
        this.delConfirm()
          .then(function () {
            return delSemester(row.semesterId);
          })
          .then(() => {
            this.selectedSemesterList();
            this.msgSuccess("删除成功");
          })
          .catch(() => {});
      },
      //学期表格中 点击添加按钮
      handleAddSemester() {
        this.handleUpdateSemester( {
          id: null,
          gradeId: this.gradeSelectedId,
        });
      },

      // 单元
      //单元表格中 点击编辑按钮
      handleUpdateUnit(row) {
        let data = Object.assign({}, row);
        data.id = data.unitId || data.id;
        let id = !!data && !!data.id ? data.id : null;
        let BASE_URL = process.env.VUE_APP_BASE_API;

        if( !data.gradeId){
          this.msgError( "请先选择年级");
          return;
        }
        if( !data.semesterId){
          this.msgError( "请先选择学期");
          return;
        }

        this.$refs.popoform
          .open({
            title: (!!id ? "编辑" : "新增") + "单元",
            formData: data,
            addUrl: "/recitation_admin/unit/add",
            updateUrl: "/recitation_admin/unit/update",
            component_list: [{ name: "unitName|单元名称|text" }],
            requireFields: "unitName",
          })
          .success((data) => {
            this.selectedUnitList();
          });
      },
      //单元表格中 点击删除按钮
      handleDeleteUnit(row) {
        console.log("单元表格中 点击删除按钮", row);
        const unitIds = row.unitId || this.ids;
        this.delConfirm()
          .then(function () {
            return delUnit(unitIds);
          })
          .then(() => {
            this.selectedUnitList();
            this.msgSuccess("删除成功");
          });
      },
      //单元表格中 点击添加按钮
      handleAddUnit() {
        this.handleUpdateUnit( {
          semesterId: this.semesterSelectedId,
          gradeId: this.gradeSelectedId,
        });
      },

      //题材表格中 点击编辑按钮
      handleUpdateType(row) {},
      //题材表格中 点击删除按钮
      handleDeleteType(row) {
      },
      //题材表格中 点击添加按钮
      handleAddType() {},
      //点击保存按钮
      save() {
        //整理参数
      },
      // 点击取消按钮
      cancel() {
        // this.open = false;
        // this.reset();
      },
      // 表单重置
      reset() {
        this.form = {
          gradeId: null,
          gradeName: null,

          deleteFlag: null,
          createdTime: null,
          updatedBy: null,
          updatedTime: null,
        };
        this.resetForm("form");
      },
    },
  };
</script>
<style >
.btnSave {
  margin: 50px 30px 0 600px;
}
.el-table .selected-row {
  /* background: #eef5fb; */
  background: #f5f7fa;
}
.el_select_table .el-table__row {
  cursor: pointer;
}
</style>
